<template>
  <div>
    <!-- <h1 title="" class=""></h1> -->
    <!-- <ChildOne abc="你好" :count="123" my-name="李四" my-first-name="Jack"></ChildOne> -->
    <!-- <ChildOne :flag="false" :abc="msg" :obj="{name:'ls',age:18}" :likes="[1,2,3,4]" :fn="function(){}"></ChildOne> -->
    <!-- <ChildOne v-bind="propsVal"></ChildOne> -->
    <!-- <ChildTwo :age="18" colorP="#ff0000" :likes="['a','b','c']" :money="123"></ChildTwo> -->

    <!-- <ChildThree @btn-event.once="printData" /> -->
    <!-- <ChildThree @btn-event="printData" /> -->
  
    <div>原生v-model</div>

    <!-- <input class="center" type="text" v-model="msg"> -->
    <!-- <input class="center" type="text" :value="msg" @input="inputChange"> -->
    <input class="center" type="text" :value="msg" @input="($event)=> msg = $event.target.value">
    <hr>
    <h1 style="text-align: center;">{{ msg }}</h1>
    <h1 style="text-align: center;">{{ name }}</h1>

    <hr>
    <div>
      <!-- <ChildFour v-model="msg"></ChildFour> -->
      <!-- <ChildFour :modelValue="msg" @update:modelValue="(val)=>msg=val"></ChildFour> -->
      <!-- <ChildFive v-model="msg"></ChildFive> -->

      <!-- v-model参数 -->
      <!-- <ChildSix v-model:demo="msg" v-model:name="name"></ChildSix> -->
      <!-- 自定义修饰符 -->
      <!-- <ChildSeven v-model.upper="msg"></ChildSeven>
      <ChildSeven v-model="msg"></ChildSeven> -->
      <!-- <ChildEight v-model:title.upper="msg"></ChildEight> -->
        <!-- 
          attr: class style id
          prop
         -->
      <!-- <ChildNine class="demo" @click="printDemo">
      </ChildNine> -->
      <!-- <SlotChild>
        <template #header>
          <h1>header</h1>
        </template>
        <template #aside>
          <h2>aside</h2>
        </template>
        <template #main>
          <h1>main</h1>
        </template>
        <template #footer>
          <h1>footer</h1>
        </template>
        <h1>nihao</h1>
      </SlotChild> -->

      <button @click="name='main'">changeName</button>
      <!-- <SlotChild>
        <template v-slot:[name]>
          <h1>{{ msg }}</h1>
        </template>
      </SlotChild> -->
      <!-- <SlotChild v-slot="{abc,count}">
        <h1>{{ abc }},{{ count }}</h1>
      </SlotChild>
      <SlotChild >
       <template #header="headerPorps">
        <h1>{{headerPorps}} === {{ headerPorps.txt }}</h1>
       </template>
      </SlotChild> -->


      <SlotChild>
        <template #default="{abc}">
          <h2>{{ abc }}</h2>
        </template>
        <template #header="{abc}">
          <h1>{{ abc }}</h1>
        </template>
      </SlotChild>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import ChildOne from './components/ChildOne.vue';
import ChildTwo from './components/ChildTwo.vue';
import ChildThree from './components/ChildThree.vue';
import ChildFour from './components/ChildFour.vue';
import ChildFive from './components/ChildFive.vue';
import ChildSix from './components/ChildSix.vue';
import ChildSeven from './components/ChildSeven.vue';
import ChildEight from './components/ChildEight.vue';
import ChildNine from './components/ChildNine.vue';
import SlotChild from './components/SlotChild.vue';

const msg = ref('hello vue3')
const name = ref('header')
const propsVal = {
  flag:false,
  abc:msg.value,
  obj:{name:'ls',age:18},
  likes:[1,2,3,4],
  fn:function(){},
  myName:'jack'
}

const printData = (val,val2)=>{
  console.log('子组件触发的 事件',val,val2);
}
const printDemo = ()=>{
  console.log('father.....');
}

const inputChange = (e)=>{
  console.log("e==>",e.target.value);
  msg.value = e.target.value
}

const modelEvent = (val)=>{
  console.log("val===>",val);
  msg.value = val
}
</script>

<style>
.center{
  display: block;
  margin: 0 auto;
}

.demo{
  color: red;
}
</style>